<template>
	<div class="top">
		
		<!-- 顶部导航栏 -->
		<Header></Header>

		<van-image
		class="pic1"
		width="390"
		height="300"
		:src="`http://localhost:3010/images/${data[8].img}`"
		/>
		
		<p class="p1">可可西里自然保护区</p>
		<div class="lb1">
			<van-swipe class="my-swipe" :autoplay="3000" 
			indicator-color="white">
			<van-swipe-item>
				<img :src="`http://localhost:3010/images/${data[0].img}`" alt="" width="350px" height="200px">
			</van-swipe-item>
			<van-swipe-item>
				<img :src="`http://localhost:3010/images/${data[9].img}`" alt="" width="350px" height="200px">
			</van-swipe-item>
			<van-swipe-item>
				<img :src="`http://localhost:3010/images/${data[2].img}`" alt="" width="350px" height="200px">
			</van-swipe-item>
			<van-swipe-item>
				<img :src="`http://localhost:3010/images/${data[10].img}`" alt="" width="350px" height="200px">
			</van-swipe-item>
			</van-swipe>
		</div>

		<div class="lb2">
			<p>目的地</p>
			<button @click="ts">尽情探索</button>
			<van-image
			width="350"
			height="300"
			radius="10"
			:src="require('@/assets/img/explore-5.4.jpg')"
			/>
		</div>

		<div class="crd1">
			<span>为了获得独特的路由体验</span>
			<p>购物</p>
			<button>现在就检查</button>
			<van-image
			width="100%"
			height="100"
			radius="5px"
			style="margin-top:56px;
			display: block;"
			:src="`http://localhost:3010/images/${data[10].img}`"
			/>
		</div>

		<div class="crd2">
			<p>活动 & 景点</p>
			<button @click="jd">查看全部</button>
			<div class="crd2_1">
				<van-swipe>
					<van-swipe-item v-for="card2_1_1 in 4">
						<div class="card2_1_1">
							<van-image
							width="350"
							height="150"
							radius="10px 10px 0 0"
							
							:src="`http://localhost:3010/images/${data[9].img}`"
							/>
							<p>xxxx</p>
							<span></span>
							<a href="#" @click="wsxq">了解详情<p>></p></a>
						</div>
					</van-swipe-item>
				</van-swipe>
				
			</div>
			
		</div>

		<div class="crd3">
			<van-image
			width="100%"
			height="175"
			:src="`http://localhost:3010/images/${data[9].img}`"
			/>
			<div class="crd3_1">
				<p>计划您的理想旅程</p>
				<span></span>
				<button>搜索</button>
			</div>
			
		</div>

		<div class="crd4" :style="'background-image:url('+`http://localhost:3010/images/${data[9].img}`+');'">
			<p>探索目的地</p>
		</div>

		<div class="crd5">
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
			<van-swipe-item>
				<img :src="`http://localhost:3010/images/${data[0].img}`" alt="" width="350px" height="150px">
			</van-swipe-item>
			<van-swipe-item>
				<img :src="`http://localhost:3010/images/${data[9].img}`" alt="" width="350px" height="150px">
			</van-swipe-item>
			<van-swipe-item>
				<img :src="`http://localhost:3010/images/${data[2].img}`" alt="" width="350px" height="150px">
			</van-swipe-item>
			<van-swipe-item>
				<img :src="`http://localhost:3010/images/${data[10].img}`" alt="" width="350px" height="150px">
			</van-swipe-item>
			</van-swipe>
		</div>

		<div class="crd6">
			<p>旅游必备信息</p>
			<button @click="zn">查看全部</button>
			<div class="crd6_1">
				<van-swipe>
					<van-swipe-item v-for="crd6_1_1 in 4">
						<div class="crd6_1_1">
							<van-image
							width="350"
							height="150"
							radius="10px 10px 0 0"
							
							:src="`http://localhost:3010/images/${data[5].img}`"
							/>
							<p></p>
							<span></span>
							<hr style="width:300px;margin: auto;">
							<a href="#">了解详情啊<p>></p></a>
						</div>
					</van-swipe-item>
				</van-swipe>
				
			</div>
			
		</div>

		<div class="crd7">
			<van-image
			width="100%"
			height="100"
			:src="`http://localhost:3010/images/${data[9].img}`"
			/>
		</div>

		<div class="crd8">
			<!-- <van-image
			class="a1"
			width="50"
			height="50"
			src="https://img01.yzcdn.cn/vant/cat.jpeg"
			/>
			<van-image
			class="a2"
			width="50"
			height="50"
			src="https://img01.yzcdn.cn/vant/cat.jpeg"
			/> -->
		</div>

		<div class="crd9">
			<van-collapse v-model="activeNames">
			<van-collapse-item title="活动与季节" name="1">
				内容
				<br>
				nei
			</van-collapse-item>
			<van-collapse-item title="探索可可西里" name="2">内容</van-collapse-item>
			<van-collapse-item title="有用的信息" name="3">内容</van-collapse-item>
			</van-collapse>
		</div>

		<!-- 底部导航栏 -->
		<Footer></Footer>
		
		
	</div>
</template>

<script>
import Vue from 'vue';
import { Image as VanImage } from 'vant';
import Header from '@/components/AppHeader.vue';
import Footer from '@/components/AppFooter.vue';
import httpApi from '@/http/index';
Vue.use(VanImage);

	export default {
		components:{Header,Footer},
		data() {
    		return {
      			currentPage: 1,
				activeNames: ['1'],
				show: false,
				data:[],
				syl:'http://localhost:3010/images',
    		};
  		},
		    methods: {
    			showPopup() {
      			this.show = true;
    			},
				ts(){
					this.$router.push({
						path:'/explore'
					})
				},
				jd(){
					this.$router.push({
						path:'/shanshui'
					})
				},
				zn(){
					this.$router.push({
						path:'/guide'
					})
				},
				wsxq(){
					this.$router.push({
						path:'/wanshandetails'
					})
				},
				listIndex(){
					httpApi.kkxlApi.queryAllPic().then(res=>{
						console.log(res);
						this.data = res.data.data
					})
				}
			},
			mounted(){
				this.listIndex()
			}
  		}
		
	
</script>

<style lang="scss" scoped>
.top {
	.pic1{
		margin-top: 0px;
	}
	position: absolute;
	.tc1{
		>button{
			background-color: #39a9ed;
			border-color: transparent;
			color: #fff;
			width: 300px;
			height: 30px;
			margin: auto;
			margin-top: 20px;
			margin-bottom: 20px;
			border-radius: 20px;
		}
		>hr{
			width: 300px;
			background-color: rgb(245, 246, 247);
			height: 1px;
			border: none;
		}
		.tc1t{
			background-color: skyblue;
			padding: 7px;
			border-radius: 50%;
			// float: left;
			margin-right: 5px;
		}
		p{
			color: #fff;
			background-color: #39a9ed;
			padding: 50px;
			margin: 0;
			// float: left;
		}
		.tc1_01{
			width: 300px;
			margin: auto;
			margin-top: 20px;
			margin-bottom: 10px;
			>p{
				padding: 20px;
			}
		}
		.tc1_02{
			width: 300px;
			margin: auto;
			margin-bottom: 20px;
			>p{
				padding: 20px;
			}
		}
		.tc1_2{
			>p{
				padding: 0;
				background-color: #fff;
				color: #bbb;
				font-size: 12px;
				float: left;
				margin-left: 25px;
			}
			>span{
				display: block;
				float: left;
				margin-top: 20px;
				margin-left: -50px;
			}
			>a{
				color: #000;
				float: left;
				margin-top: 40px;
				margin-left: -50px;
			}
		}
	}
	.t1 {
	position: relative;
	display: block;
	left: -150px;
	color: #000;
	top: -280px;
	}
	.t2{
		position: relative;
		display: flex;
		right: -300px;
		color: #000;
		top: -305px;
	}
	.t3 {
		position: relative;
		display: flex;
		float: right;
		right: 30px;
		top: -330px;
		color: #000;
	}
	.p1 {
		position: relative;
		display: flex;
		right: -30px;
		top: -200px;
		font-size: 40px;
		color: #fff;
		width: 200px;
		white-space: normal;
	}
	.my-swipe .van-swipe-item {
		color: #fff;
		font-size: 20px;
		line-height: 300px;
		text-align: center;
		background-color: #39a9ed;
		position: relative;
		width: 350px;
    }
	.lb1 {
		position: relative;
		margin-top: -80px;
		box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.2);
		width: 350px;
		margin-left: 20px;
		.my-swipe{
			width: 350px;
			height: 200px;
		}
	}
	.lb2 {
		position: absolute;
		margin-left: 20px;

		>p {
			font-size: 20px;
			margin-left: -240px;
		}
		> button {
			display: block;
			// margin-left: 10px;
			background-color: #CC6600;
			color: #fff;
			border-color: transparent;
			border-radius: 20px;
			margin-top: 10px;
			margin-bottom: 10px;
			font-size: 14px;
			padding: 5px;
		}
		> van-image {
			display: block;
		}
	}
	.crd1 {
		background-color: #CC6600;
		width: 350px;
		height: 298px;
		margin: 0;
		margin-left: 20px;
		position: absolute;
		margin-top: 430px;
		border-radius: 5px;
		>span {
			position: relative;
			color: #fff;
			display: block;
			margin-left: 15px;
			margin-top: 70px;
		}
		>p {
			width: 50px;
			margin: 0;
			margin-bottom: 5px;
			margin-left: 15px;
			color: #fff;
		}
		>button {
			width: 100px;
			display: block;
			margin-left: 15px;
			border-radius: 10px;
			border-color: transparent;
			color: #000;
		}
		
	}
	.crd2 {
		// background-color: yellow;
		display: block;
		position: relative;
		margin-top: 770px;
		height: 400px;
		>p{
			font-size: 25px;
			display: flex;
			margin-left: 20px;
			margin-bottom: 0;
		}
		>button {
			background-color: #CC6600;
			border-color: transparent;
			color: #fff;
			display: flex;
			margin-left: 20px;
			line-height: 30px;
			border-radius: 10px;
		}
		>.crd2_1{
			overflow: hidden;
			background-color: #fff;
			width: 350px;
			margin-left: 20px;
			height: 300px;
			border-radius: 10px;
			margin-top: 20px;
			box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.2);
			// >span{
			// 	display: flex;
			// 	// margin-left: 10px;
			// 	width: 290px;
			// 	// word-wrap: normal;
			// 	display: inline-block;
			// 	text-align: justify;
			// }
			// >a {
			// 	display: flex;
			// 	margin-top: 10px;
			// 	margin-left: 30px;
			// 	color: green;
			// 	>p{
			// 		display: flex;
			// 		margin: 0;
			// 		padding-left: 210px;
			// 		color: green;
			// 		margin-top: 3px;
			// 	}
			// }
			>.card2_1_1 {
				>span {
					padding: 0 1rem;
					overflow: hidden;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				>a{
					display: flex;
					margin-top: 10px;
					margin-left: 30px;
					color: #CC6600;
				}
			}
		}
	}
	.crd3{
		background-color: #CC6600;
		// display: flex;
		display: block;
		height: 350px;
		margin-top: 40px;
		box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.2);
		.crd3_1{
			// background-color: green;
			height: 150px;
			>p{
			display: flex;
			// margin: 0;
			padding: 0 1rem;
			margin-top: 20px;
			margin-left: 15px;
			color: #fff;
			}
			>span{
				padding: 0 1rem;
				overflow: hidden;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				margin: 0 15px 0 15px;
				color: #fff;
			}
			>button{
				display: flex;
				margin-top: 20px;
				width: 100px;
				height: 50px;
				align-items: center;
				justify-content: center;
				margin-left: 30px;
				border-radius: 20px;
				border-color: transparent;
				color: #000;
				background-color: #fff;
			}
		}
		
	}
	.crd4 {
		width: 100%;
		height: 250px;
		background-color: #CC6600;
		margin-top: 40px;
		box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.2);

		>p{
			font-size: 30px;
			color: #fff;
			display: flex;
			margin: 0;
			padding-top: 20px;
			margin-left: 20px;
		}
	}
	.crd5 {
		margin-top: 50px;
		height: 200px;
		// background-color: green;
		.my-swipe{
			height: 150px;
			width: 350px;
			margin: auto;
			border-radius: 10px;
			// padding-top: 30px;
			display: flex;
		}
		.my-swipe .van-swipe-item {
			color: #fff;
			font-size: 20px;
			line-height: 150px;
			text-align: center;
			background-color: #39a9ed;
		}
	}
	.crd6 {
		// background-color: yellow;
		display: block;
		position: relative;
		// margin-top: 770px;
		height: 200px;
		>p{
			font-size: 25px;
			display: flex;
			margin-left: 20px;
			margin-bottom: 0;
		}
		>button {
			background-color: #CC6600;
			border-color: transparent;
			color: #fff;
			display: flex;
			margin-left: 20px;
			line-height: 30px;
			border-radius: 10px;
		}
		>.crd6_1{
			background-color: #fff;
			width: 350px;
			margin-left: 20px;
			height: 280px;
			border-radius: 10px;
			margin-top: 20px;
			box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.2);
			// text-align: right;
			>p{
				display: flex;
				margin-left: 30px;
			}
			>span{
				display: flex;
				// margin-left: 10px;
				width: 290px;
				// word-wrap: normal;
				display: inline-block;
				text-align: justify;
			}
			>a {
				display: flex;
				margin-top: 10px;
				margin-left: 30px;
				color: #CC6600;
				>p{
					display: flex;
					margin: 0;
					padding-left: 210px;
					color: #CC6600;
					margin-top: 3px;
				}
			}
		}
	}
	.crd7 {
		display: flex;
		margin-top: 200px;
		
	}
	.crd8 {
		display: flex;
		margin-top: 30px;
		>.a1 {
			margin-left: 30px;
		}
		>.a2 {
			margin-left: 200px;
		}
	}
	.crd9 {
		margin-top: 50px;
	}
	.crd10 {
		width: 100%;
		height: 760px;
		background-color: #CC6600;
		margin-top: 30px;
		>.crd10_1{
			width: 350px;
			height: 120px;
			padding-top: 30px;
			// background-color: blue;
			border-bottom: 1px solid #fff;
			// border-bottom-color: #fff;
			margin: auto;
			>p {
				font-size: 18px;
				display: flex;
				color: #fff;
			}
			>span {
				font-size: 13px;
				float: left;
				color: #fff;
			}
		}
		.crd10_2{
			width: 350px;
			height: 120px;
			padding-top: 30px;
			border-bottom: 1px solid #fff;
			margin: auto;
			>p{
				display: flex;
				color: #fff;
				font-size: 18px;
			}
			>.a1{
				// display: flex;
				float: left;
			}
			>.a2 {
				// display: flex;
				float: left;
				margin-left: 10px;
			}
		}
		.crd10_3{
			width: 350px;
			height: 120px;
			padding-top: 30px;
			border-bottom: 1px solid #fff;
			margin: auto;
			>p{
				color: #fff;
				display: flex;
				font-size: 13px;
			}
		}
		.crd10_4{
			width: 350px;
			height: 120px;
			padding-top: 30px;
			border-bottom: 1px solid #fff;
			margin: auto;
			>p{
				color: #fff;
				display: flex;
			}
			>.a1 {
				float: left;
				display: flex;
				padding-top: 20px;
			}
			>.a2{
				display: flex;
				float: left;
				padding-top: 20px;
				margin-left: 100px;
			}
			>.a3{
				display: flex;
				float: left;
				padding-top: 20px;
				margin-left: 100px;
			}
			>.a4{
				display: flex;
				padding-top: 20px;
				float: right;
			}
		}
		.crd10_5{
			width: 350px;
			height: 120px;
			padding-top: 30px;
			border-bottom: 1px solid #fff;
			margin: auto;
			>p{
				display: flex;
				color: #fff;
				font-size: 13px;
				width: 60px;
			}
			.a1{
				display: flex;
				float: right;
				background-color: orange;
				padding: 10px;
				border-radius: 50%;
				margin-top: -40px;
			}
		}
	}
	.card2_1_1{
		>p {
			padding: 0 1rem;
			margin-top: 10px;
		}
		>span{
			padding: 0 1rem;
			overflow: hidden;
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			margin-bottom: 40px;
		}
		>a {
			display: flex;
			margin-top: 10px;
			padding: 0 1rem;
			color: #CC6600;
			>p{
				display: flex;
				position: absolute;
				margin-left: 290px;
				// padding-left: 210px;
				color: #CC6600;
				margin-top: 3px;
			}
		}
	}
	.crd6_1_1{
		p{
			padding: 0 1.5rem;
		}
		span{
			padding: 0 1.5rem;
			overflow: hidden;
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			margin-bottom: 15px;
		}
		a{
			display: flex;
			margin-top: 10px;
			padding: 0 1rem;
			color: #CC6600;
			>p{
				display: flex;
				// margin: 0;
				// padding-left: 210px;
				position: absolute;
				margin-left: 280px;
				color: #CC6600;
				margin-top: 3px;
			}
		}
	}
}

</style>